<template>
  <view class="chart_box">
    <view class="chart_container">
      <view class="head">
        <image class="w-70rpx" src="@/static/icon/step.svg" mode="widthFix"></image>
        <text class="title">活动</text>
        <view class="flex-grow"></view> <!-- 用于将图标推到最右侧 -->
        <image
            class="right-arrow-icon"
            src="/static/icon/right.svg"
            mode="widthFix"
            @click="gotoDataPage"
        ></image>
      </view>

      <text class="refresh-tip">当前活动量低于周平均水平，请继续努力</text>
      <view class="data">
        <view v-for="(item, index) in activityData" :key="item.title" class="item">
          <text class="name">{{ item.title }}</text>
          <text class="value" >
            <text :style="{ color: item.color }">{{ item.value || "--" }}</text>
            <text class="unit">{{ item.unit }}</text>
          </text>
          <!-- 除了最后一个元素，其他元素后面都显示分隔线 -->
          <view v-if="index < activityData.length - 1" class="divider"></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>

import {queryMyStepInfoByDay} from "@/api/ring/chart.js";
import dayjs from "dayjs";
import store from "@/store/index.js";

export default {
  props: {
    date: String,
  },
  data() {
    return {
      activityData: [
        {
          title: "距离",
          value: "--",
          unit: "分",
          color: "#EEE3A1",
          isLast: false,
        },
        {
          title: "消耗",
          value: "--",
          unit: "卡",
          color: "#F1AC68",
          isLast: false,
        },
        {
          title: "步数",
          value: 0,
          unit: "步",
          color: "#85CB98",
          isLast: true,
        },
      ],
    };
  },

  computed: {
    isLogin() {
      return store.state.userToken;
    },
  },

  methods: {
    getTitle() {
      return 'activity';
    },
    gotoDataPage() {
      const date = dayjs().format("YYYY-MM-DD");
      // 如果是今天 且同步时间不同 意味着今天没有对应的同步数据
      uni.navigateTo({ url: `/pages/ring/detail/index?type=Activity&title=活动&date=`+date });
    },
    updateChartData(date) {
      if (!this.isLogin) return;
      if (!date || date == 'Invalid Date') {
        date = dayjs().format("YYYY-MM-DD HH:mm:ss");
      }
      // date = date || this.date || dayjs().format("YYYY-MM-DD HH:mm:ss");
      queryMyStepInfoByDay({
        dateStr: dayjs(date).format("YYYY-MM-DD"),
        offsetMinutes: new Date().getTimezoneOffset(),
      })
          .then((res) => {
            console.log("queryMyStepInfoByDay", res.data);

            this.activityData[0].value = !res.data.distanceSum ? 0 : res.data.distanceSum.toFixed(1);
            this.activityData[1].value = !res.data.calSum ? 0 : res.data.calSum.toFixed(1);
            this.activityData[2].value = res.data.sum || 0;
          })
          .catch((error) => console.log(error));
    },
  },
};
</script>

<style lang="scss" scoped>
.chart_box {
  width: 100%;
  height: 100%;
  color: black;

  .w-70rpx {
    width: 48rpx;
  }

  .w-40rpx {
    width: 40rpx;
  }

  .chart_container {
    padding: 20rpx 30rpx;

    .head {
      width: 100%;
      height: 70rpx;
      display: flex;
      align-items: center;
      justify-content: flex-start;

      .title {
        font-size: 32rpx;
        font-weight: 500;
        text-align: left;
        margin-left: 12rpx;
      }

      .flex-grow {
        flex-grow: 1;
      }
    }

    .right-arrow-icon {
      width: 32rpx;
      height: 32rpx;
    }

    .refresh-tip {
      font-size: 24rpx;
      color: #999999;
      margin-top: 8rpx;
      margin-bottom: 16rpx;
    }

    .data {
      margin-top: 20rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;

        .name {
          font-family: PingFang SC;
          font-size: 28rpx;
          font-weight: 500;
        }

        .value {
          font-family: PingFang SC;
          font-weight: 400;
          font-size: 28rpx;

          .unit {
            font-size: 24rpx;
          }
        }

        .divider {
          width: 1px;
          height: 80%; /* 调整竖线高度，避免和上下元素重叠 */
          background-color: #CCCCCC;
          position: absolute;
          right: 0;
          top: 10%; /* 垂直居中 */
        }
      }
    }
  }
}
</style>
